<template>
  <div class="panel-workbench">
    <div class="top-panel">面板导航</div>
    <div class="btm-panel"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".btm-panel"));
    const colors = ["#c23531", "#000"];
    // 绘制图表
    myChart.setOption({
      color: colors,
      grid: {
        //布局
        right: "10%",
        // top:"10%"
      },
      legend: {
        //头部的说明
        data: ["评论数", "每周用户访问指标"],
      },
      xAxis: [
        {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "评论数",
          min: 0,
          max: 400,
          position: "right",
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[0],
            },
          },
        },
        {},
        {
          type: "value",
          name: "每周用户访问指标",
          min: 0,
          max: 400,
          position: "left",
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[1],
            },
          },
        },
      ],
      series: [
        {
          name: "评论数",
          type: "bar",
          data: [100, 200, 100, 100, 200, 100, 200],
        },
        {
          name: "每周用户访问指标",
          type: "line",
          data: [133, 142, 333, 111, 222, 345, 260],
        },
      ],
    });
  },
  computed: {},
  methods: {},
  components: {},
};
</script>
<style lang='scss' scoped>
.panel-workbench {
  width: 95%;
  background-color: #fff;
  margin-top: 20px;
  .top-panel {
    height: 50px;
    border-bottom: 1px solid #ccc;
    line-height: 50px;
    padding: 0 30px;
    margin-bottom: 10px;
  }
  .btm-panel {
    height: 300px;
  }
}
</style>